<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    .box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden}
    .box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
    @-webkit-keyframes loading-1{0%{transform:rotate(0)}
        50%{transform:rotate(180deg)}
        100%{transform:rotate(360deg)}
    }
    .loading-1{width:35px;height:35px;position:relative}
    .loading-1 i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);-webkit-animation:loading-1 .6s linear 0s infinite}
    @-webkit-keyframes loading-2{0%{transform:scaleY(1)}
        50%{transform:scaleY(.4)}
        100%{transform:scaleY(1)}
    }
    .loading-2 i{display:inline-block;width:4px;height:35px;border-radius:2px;margin:0 2px;background-color:#333}
    .loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite}
    .loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite}
    .loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite}
    .loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite}
    .loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}
    @-webkit-keyframes loading-3{50%{transform:scale(.4);opacity:.3}
        100%{transform:scale(1);opacity:1}
    }
    .loading-3{position:relative}
    .loading-3 i{display:block;width:15px;height:15px;border-radius:50%;background-color:#333;position:absolute}
    .loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading-3 1s ease 0s infinite}
    .loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading-3 1s ease -.12s infinite}
    .loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading-3 1s ease -.24s infinite}
    .loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading-3 1s ease -.36s infinite}
    .loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading-3 1s ease -.48s infinite}
    .loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading-3 1s ease -.6s infinite}
    .loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading-3 1s ease -.72s infinite}
    .loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading-3 1s ease -.84s infinite}

</style>
<body>
<div class="box">
    <div class="loader">
        <div class="loading-1">
            <i></i>
        </div>
    </div>

    <div class="loader">
        <div class="loading-2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>

    <div class="loader">
        <div class="loading-3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</div>
</body>